<!DOCTYPE html>
<html>
<head>
<title>宋迪的个人网页</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="宋迪, 个人介绍" />
<script> 
  addEventListener("load", function() { 
    setTimeout(hideURLbar, 0); 
  }, false);
	function hideURLbar(){ 
    window.scrollTo(0,1); 
  } 
</script>
<!-- //for-mobile-apps -->
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<!-- js -->
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<!-- //js -->

<!-- start-smoth-scrolling -->
<script src="js/move-top.js"></script>
<script src="js/easing.js"></script>
<script>
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->

<!-- skills -->
<script src="js/pie-chart.js" type="text/javascript"></script>
 <script type="text/javascript">

        $(document).ready(function () {
            $('#demo-pie-1').pieChart({
                barColor: '#38AFEF',
                trackColor: '#fff',
                lineCap: 'round',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });

            $('#demo-pie-3').pieChart({
                barColor: '#38AFEF',
                trackColor: '#fff',
                lineCap: 'round',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });
			
			      $('#demo-pie-4').pieChart({
                barColor: '#38AFEF',
                trackColor: '#fff',
                lineCap: 'round',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });
        });
    </script>
<!-- skills -->
<script type="text/javascript" src="js/numscroller-1.0.js"></script>

</head>
<body>
<!-- banner -->
<div class="header-top">
	<div class="container">
		<ul>
			<li><a class="scroll" href="#about"><span class="glyphicon glyphicon-file" aria-hidden="true"></span>个人介绍</a></li>
			<li style="display: none"><a class="scroll" href="#emailme"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>联系我</a></li>
			<li><a href="javascript:window.print()"><span class="glyphicon glyphicon-print" aria-hidden="true"></span>打印成简历</a></li>
			<li><a href="#portfolioModal9" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal">
				<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>我的头像</a></li>
		</ul>
	</div>
</div>	
<div class="header">
	<div class="container">
		<div class="col-md-8 header-left">
			<div class="col-sm-5 pro-pic">
				<img class="img-responsive" src="images/re1.jpg" alt=" "/>
			</div>
			<div class="col-sm-5 pro-text">
				<h1>宋迪</h1>
				<p>产品/运营</p>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="col-md-4 header-right ">
			<ul class="list-left">
				<li>电子邮件:</li>
				<li>个人网站:</li>
				<li>手机号码:</li>
			</ul>
			<ul class="list-right">
				<li><a href="mailto:sd_hit_sz@sina.cn">sd_hit_sz@sina.cn</a></li>
				<li><a href="//sd_hit.oschina.io">songdi.oschina.io</a></li>
				<li>156-4323-7892</li>
			</ul>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //banner -->
<!-- about -->
<div id="about" class="about">
	<div class="container">
		<h3 class="tittle">关于我</h3>
		<p class="abt-para">
			1992年出生于吉林省吉林市的一个小城镇，拥有东北女孩的典型
            特质，真诚宽容，坚强果敢，心地善良，耿直率真。在努力提高自
            身综合素质的同时，六年如一日地做着“程序员鼓励师”，希望终有
            一天能摆脱专业的束缚，做自己爱做的事，给未来更大的可能。
		</p>
	</div>
	<div class="col-md-6 abt-left ">
		<h2>教育经历</h2>
			<div class="accordion">
				<div class="accordion-section">
					<h5>
						<a class="accordion-section-title" href="#accordion-1">
							<span>2010.09 - 2014.07</span> 哈尔滨工业
                            大学（威海）
							<i class="glyphicon glyphicon-chevron-down"></i>
							<div class="clearfix"></div>
						</a>
					</h5>
					<div id="accordion-1" class="accordion-section-content">
						<h6>学位</h6>
						<ul>
							<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">本科</a></li>
						</ul>
						<h6>成绩与奖励</h6>
						<ul>
							<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">通信工程专业：排名30/110</a></li>
							<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">二等奖学金一次，三等奖学金一次</a></li>
						</ul>
					</div>
				</div>
				<div class="accordion-section">
					<h5><a class="accordion-section-title" href="#accordion-2">
						<span>2014.09 - 至今</span> 哈尔滨工业大学深圳研究生院
					<i class="glyphicon glyphicon-chevron-down"></i><div class="clearfix"></div>
					</a></h5>
					<div id="accordion-2" class="accordion-section-content">
						<h6>学位</h6>
						<ul>
							<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">硕士</a></li>
						</ul>
						<h6>成绩与奖励</h6>
						<ul>
							<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">信息与通信工程专业：排名9/90</a></li>
							<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">一等奖学金一次，二等奖学金一次/学术论文一篇</a></li>
						</ul>
					</div>
				</div>
			</div>
				<script>
							jQuery(document).ready(function() {
								function close_accordion_section() {
									jQuery('.accordion .accordion-section-title').removeClass('active');
									jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
								}

								jQuery('.accordion-section-title').click(function(e) {
									// Grab current anchor value
									var currentAttrValue = jQuery(this).attr('href');

									if(jQuery(e.target).is('.active')) {
										close_accordion_section();
									}else {
										close_accordion_section();

										// Add active class to section title
										jQuery(this).addClass('active');
										// Open up the hidden content panel
										jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
									}

									e.preventDefault();
								});
							});
				</script>
	</div>
	<div class="col-md-6 abt-right ">
		<div class="col-sm-4 abt-gd-left text-center">
			<div id="demo-pie-1" class="pie-title-center" data-percent="85"> <span class="pie-value"></span> </div>
			<h4>学习能力</h4>
		</div>
		<div class="col-sm-4 abt-gd-left text-center">		   
			<div id="demo-pie-3" class="pie-title-center" data-percent="75"> <span class="pie-value"></span> </div>
			<h4>逻辑能力</h4>
		</div>
		<div class="col-sm-4 abt-gd-left text-center">		   
			<div id="demo-pie-4" class="pie-title-center" data-percent="60"> <span class="pie-value"></span> </div>
			<h4>英语能力</h4>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="clearfix"></div>
</div>
<!-- about -->
<!-- education -->
<div class="employment">
	<div class="container">
		<h3 class="tittle ">工作经历</h3>
		<p class="abt-para ">2015年3月到2016年3月，一直做科研工作，关于电磁场金属标签的自然科学基金项目，负责理论算法研究，培养了分析与解决问题的能力。在这期间，同时担任老师的教学助理，锻炼了组织协调能力。今年才真正接触互联网产品经理这个职业，在一家法国外企的创业团队做了2个月实习产品助理，对此产生了浓厚的兴趣，并有意愿把它当成未来的职业发展方向。今年暑期也会在一个老师介绍的一个团队里与产品经理学习。下面是简要的实习心得。</p>
		<div class="col-md-6 employ-left">
			<h4>01</h4>
		</div>
		<div class="col-md-6 employ-right">
			<h5><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>产品定位与市场分析</h5>
			<p>一个好的产品必须要有明确的产品核心定位，法国团队做的产品核心是，只在好友间分享好东西。这个好东西的定位就要求是精品，产品初期设计是定位30岁左右的白领，然而在深圳已有Enjoy,提供中高端美食推荐，所以未来会成为最大的竞争者。</p>
		</div>
		<div class="col-md-6 employ-left2">
			<h5>用户调研与问题反馈<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span></h5>
			<p>在发布会，让用户下载app,并询问是否有哪些不满意的地方，整个过程尽量站在用户的角度上，轻松的聊天，并将问题总结起来。操作问题找技术人员沟通修改，设计问题与老板反馈，并提出合适的修改方案。 </p>
		</div>
		<div class="col-md-6 employ-right2">
			<h4>02</h4>
		</div>
		<div class="col-md-6 employ-left ">
			<h4>03</h4>
		</div>
		<div class="col-md-6 employ-right">
			<h5><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>用户行为分析与消息推送</h5>
			<p>从后台调取用户注册信息，给不同的用户定制标签，根据极光推送平台给出的用户点击量，活跃用户与在线用户的数量，实时的推送不同的信息，与用户保持互动，有效提高留存率，提升用户体验。</p>
		</div>
		<div class="col-md-6 employ-left2">
			<h5>产品推广与Axure交互<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span></h5>
			<p>为了增长app商店入住率，开展产品推广活动。招聘兼职推广人员，分区域宣传产品，同时给用户一定的奖励机制。将第一版的问题汇总，为了第二版的app做交互设计。 </p>
		</div>
		<div class="col-md-6 employ-right2">
			<h4>04</h4>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- education -->
<!-- num scroller -->
<div class="num-scroller">
	<div class="container">
		<h3 class="tittle ">职业特长</h3>
		<div class="col-md-3 capabil-grid text-center">
			
			<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='1000' data-delay='.5' data-increment="100">80</div>
			<p>HTML,JS,CSS语言基础</p>		
		</div>
		<div class="col-md-3 capabil-grid text-center">
					
			<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='1700' data-delay='.5' data-increment="5">55</div>
			<p>熟悉AXURE，Visio软件</p>	
		</div>
		<div class="col-md-3 capabil-grid text-center" >
			
			<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='9000' data-delay='.5' data-increment="100">85</div>				
			<p>沟通能力，外在亲和力</p>
		</div>
		<div class="col-md-3 capabil-grid text-center">			
			<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='2500' data-delay='.5' data-increment="1">90</div>
			<p>对产品的兴趣</p>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //num scroller -->
<!-- portfolio -->
<div class="portfolio">
	<div class="container">
		<h3 class="tittle ">照片集</h3>
			<div class="portfolio-grids">
				<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
				<script type="text/javascript">
									$(document).ready(function () {
										$('#horizontalTab').easyResponsiveTabs({
											type: 'default', //Types: default, vertical, accordion           
											width: 'auto', //auto or any width like 600px
											fit: true   // 100% fit in a container
										});
									});
									
				</script>
				<div class="sap_tabs">
					<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
						<ul class="resp-tabs-list">
							<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>校园活动</span></li> 
							<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>公益活动</span></li> 
							<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>其他</span></li> 
						</ul>				  	 
						<div class="resp-tabs-container">
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal1" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/re4.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal3" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/re6.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/re7.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/re8.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/re9.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/re10.JPG" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/re11.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal8" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/re12.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal9" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/zhijiao1.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd  ">
									<div class="thumb">
										<a href="#portfolioModal10" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/zhijiao2.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal11" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/zhijiao3.JPG" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal12" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/qita1.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal13" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/qita2.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd">
									<div class="thumb">
										<a href="#portfolioModal14" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/qita3.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd">
									<div class="thumb">
										<a href="#portfolioModal15" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/qita4.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
	</div>
</div>
<!-- //portfolio -->
<!-- more skills -->
<div class="more">
	<div class="container">
		<h3 class="tittle ">校园经历</h3>
		<div class="col-md-6 skill-left ">
			<div class="progress">
				  <div class="progress-bar progress-bar-success" style="width: 30%">组织能力
					<span class="sr-only">35% Complete (success)</span>
				  </div>
				  <div class="progress-bar progress-bar-warning " style="width: 40%">
					<span class="sr-only"></span>
				  </div>
				  <p>70%</p>
				  <div class="clearfix"></div>
			</div>
			<div class="progress">
				  <div class="progress-bar progress-bar-success1" style="width: 30%">决策能力
					<span class="sr-only">35% Complete (success)</span>
				  </div>
				  <div class="progress-bar progress-bar-warning1" style="width: 20%">
					<span class="sr-only"></span>
				  </div>
				  <p>50%</p>
				  <div class="clearfix"></div>
			</div>
			<div class="progress">
				  <div class="progress-bar progress-bar-success3" style="width: 30%">团队合作
					<span class="sr-only">35% Complete (success)</span>
				  </div>
				  <div class="progress-bar progress-bar-warning3 " style="width: 55%">
					<span class="sr-only"></span>
				  </div>
				  <p>85%</p>
				  <div class="clearfix"></div>
			</div>
			<div class="progress">
				  <div class="progress-bar progress-bar-success2" style="width: 30%">执行力
					<span class="sr-only">35% Complete (success)</span>
				  </div>
				  <div class="progress-bar progress-bar-warning2" style="width: 55%">
					<span class="sr-only"></span>
				  </div>
				  <p>85%</p>
				  <div class="clearfix"></div>
			</div>
			<div class="progress no-marg">
				  <div class="progress-bar progress-bar-success4" style="width: 30%">创新能力
					<span class="sr-only">35% Complete (success)</span>
				  </div>
				  <div class="progress-bar progress-bar-warning4" style="width: 40%">
					<span class="sr-only"></span>
				  </div>
				  <p>70%</p>
				  <div class="clearfix"></div>
			</div>
		</div>
		<div class="col-md-6 skill-right ">
			<div class="scrollbar scrollbar1">
				<div class="more-gds">
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-scissors" aria-hidden="true"></span>
					</div>
					<div class="col-sm-9 more-right">
						<h4>2010.10-2013.09 校园网络电视台播音部部长</h4>
						<p>主要负责校内新闻的播报与校内大型活动的出境主持，同时大二开始担任部长，负责新成员的管理与专业培训。获得‘十佳主持人’证书。</p>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="more-gds yes_marg">
					<div class="col-sm-9 more-right2">
						<h4>2014.09-2015.09 校十佳主持人</h4>
						<p>通过比赛，获得‘校十佳主持人’称号。同时作为主持人团队，多次主持校内的大型晚会。</p>
					</div>
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="more-gds yes_marg">
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
					</div>
					<div class="col-sm-9 more-right">
						<h4>2014.10-2015.10 义工联合会 策划部部长</h4>
						<p>主要负责组织义工活动，招募同学每周有固定的助老，助学等活动。定期做一些公益活动。获得‘四星级义工’证书。</p>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="more-gds yes_marg">
					<div class="col-sm-9 more-right2">
                        <h4>2015.07 江西上犹县石坑村希望小学 支教</h4>
                    <p>每年的同一个地点，同一个时间，13人的队伍，希望给孩子们带去欢乐，带去陪伴，带去成长。
                        </p></div>
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- more skills -->
<!-- contact -->
<div id="emailme" class="contact" style="display: none">
	<div class="container">
		<h3 class="tittle">Contact</h3>
		<div class="col-md-6 contact-left ">
			<div class="horizontal-tab">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#tab1" data-toggle="tab" aria-expanded="false">Contact me</a></li>
					<li class=""><a href="#tab2" data-toggle="tab" aria-expanded="false">Hire me</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active in" id="tab1">
						<div class="contact-form">
							<ul>
								<li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>1234k Avenue, 4th block, <span>Newyork City.</span></li>
								<li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:info@example.com">info@example.com</a></li>
								<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>+1234 567 567</li>
							</ul>
							<form>
								<input type="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" required="">
								<input type="email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
								<textarea type="text" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required="">Message...</textarea>
								<input type="submit" value="Submit" >
							</form>
						</div>
					 
					</div>
					<div class="tab-pane" id="tab2">
					  <div class="contact-form">
							<form>
								<input type="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" required="">
								<input type="email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
								<textarea type="text" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required="">Description...</textarea>
								<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
									<div class="fileUpload btn btn-primary">
										<span>Upload</span>
										<input id="uploadBtn" type="file" class="upload" />
									</div>
								<input type="submit" value="Send Request" >
							</form>
							<script>
								document.getElementById("uploadBtn").onchange = function () {
									document.getElementById("uploadFile").value = this.value;
								};
							</script>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<div class="col-md-6 contact-right ">
			<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d2482.432383990807!2d0.028213999961443994!3d51.52362882484525!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1423469959819" frameborder="0" style="border:0"></iframe>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //contact -->
<!-- for bootstrap working -->
	<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<div class="portfolio-modal modal fade slideanim" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>出镜主持</h3>
                        <img src="images/re4.jpg" class="img-responsive img-centered" alt="">
                        <p>这是第一次老师把我从幕后推到了前台，为了准备，我整整背了三天稿子，就是害怕自己紧张而忘词。感恩老师的信任，同时感谢努力的自己。这段经历激活了我的自信心，同时也更强化了我敢于担当的勇气。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>录制mv</h3>
                        <img src="images/re7.jpg" class="img-responsive img-centered" alt="">
                        <p>照片中的我们，是好同事也是好朋友，记得我们一起熬夜赶录音稿，记得我们一起填词配音的段子，记得我们一起完成采访后的欢欣鼓舞。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>新闻播报</h3>
                        <img src="images/re6.jpg" class="img-responsive img-centered" alt="">
                        <p>整个大一，我一直都被要求做新闻录音，为了锻炼预感，练习发音。大二开始，老师要求做新闻联播，也是我第一次面对摄像机。至今仍记得，整期录完的喜悦。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>313工作室</h3>
                        <img src="images/re8.jpg" class="img-responsive img-centered" alt="">
                        <p>整个大学，除了教室，宿舍，我存在最多的地方就是313工作室，我们校网视的聚集点。在这里，我得到了成长，找到了志同道合的朋友，遇见最好的自己。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>校庆晚会</h3>
                        <img src="images/re9.jpg" class="img-responsive img-centered" alt="">
                        <p>从幕后走到台前，第一次站在舞台上，第一次听到那么多的掌声与欢呼，才发现自己渐渐从一个羞涩的小女孩走向开朗。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>跨年晚会</h3>
                        <img src="images/re10.JPG" class="img-responsive img-centered" alt="">
                        <p>在演出前5天，通知要求出一个节目，好在有团队的帮助，我们成功的迎来在深圳的第二年。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal7" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>校庆晚会</h3>
                        <img src="images/re11.jpg" class="img-responsive img-centered" alt="">
                        <p>因研二开始就要放弃社团，投入科研，这是在校主持生涯的最后一次登台。每每大型活动，都是我们5人主持，最后的谢幕，记得彼此眼中的晶莹，那是最好的青春记忆。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>义工活动</h3>
                        <img src="images/re12.jpg" class="img-responsive img-centered" alt="">
                        <p>在义工联的一年，我才真正的接触公益。我们去助学，助老，募捐，去做志愿者等等，这段经历让我更加珍惜时光，懂得分享。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal9" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
                        <h3>支教队伍</h3>
                        <img src="images/zhijiao1.jpg" class="img-responsive img-centered" alt="">
                        <p>在没有老师的带领下，我们组成13人的支教队伍，去江西的一所希望小学支教。不到一个月的时间，我们从互不相识到不分彼此，这大抵就是爱的凝聚力吧。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal10" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
                        <h3>生活日常</h3>
                        <img src="images/zhijiao2.jpg" class="img-responsive img-centered" alt="">
                        <p>课上我教孩子们音乐，美术，是孩子们的班主任。课下我是孩子们的伙伴，与他们一起玩闹，和他们一起谈心。与他们一起，唤醒了我渐渐沉睡的童心，更让我学会换位思考，认真倾听。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal11" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
                        <h3>团队合作</h3>
                        <img src="images/zhijiao3.JPG" class="img-responsive img-centered" alt="">
                        <p>每天的课程，我们都会有一人主讲，没课的人在课上旁听。结束后，所有人聚在一起，反馈上课的情况，孩子们的接受能力，相互更改教案。这种互动方式，增强了备课效率，提高了教学质量，同时也让我真切体会到了团队合作的能量。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="portfolio-modal modal fade slideanim" id="portfolioModal12" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
                        <h3>致青春</h3>
                        <img src="images/qita1.jpg" class="img-responsive img-centered" alt="">
                        <p>我喜欢朗诵，喜欢在饭后的傍晚，坐在宿舍楼下，听电台里缓慢低沉的心灵鸡汤。这种校园的惬意充满了青春的气息，将永远珍藏在记忆里。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="portfolio-modal modal fade slideanim" id="portfolioModal13" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
                        <h3>商业晚会</h3>
                        <img src="images/qita2.jpg" class="img-responsive img-centered" alt="">
                        <p>每件事未必都有意义，有不同的思考角度就是收获。不要吝啬尝试，突破自我，会发现世事原本如此简单自然。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
     <div class="portfolio-modal modal fade slideanim" id="portfolioModal14" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
                        <h3>音乐世界</h3>
                        <img src="images/qita3.jpg" class="img-responsive img-centered" alt="">
                        <p>虽然看不懂乐谱，仍就学会了尤克里里。虽然文笔欠佳，偶尔心血来潮也写上几句。音乐世界里我们完全可以自娱自乐，生活同理。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="portfolio-modal modal fade slideanim" id="portfolioModal15" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
                        <h3>所得荣誉</h3>
                        <img src="images/qita4.jpg" class="img-responsive img-centered" alt="">
                        <p>学生生活参加了各种活动，很庆幸，得到了大家的认可。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    

	<!--scrolling js-->
	<script src="js/jquery.nicescroll.js"></script>
	<script src="js/scripts.js"></script>
	<!--//scrolling js-->
	<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->

</body>
</html>
